<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1000" :mask-closable="false">
      <Scroll :height="height">
      <div style="width: 90%;margin: 10px auto;" id="page_material">
        <div style="text-align: center;font-size: 20px">{{ company }}客户工程物料清单</div>
        <div style="text-align: center" class="content_title">日期：{{ projectParams.material_list_time }}</div>
        <div class="content_title">项目部　：{{ organization.organization_name }}</div>
        <div class="content_title">项目编号：{{ projectParams.project_code }}</div>
        <div class="content_title">项目名称：{{ projectParams.project_name }}</div>
        <div>
          <table class="gridtable">
            <tr>
              <th>序号</th>
              <th>物料类别</th>
              <th>物料编码</th>
              <th>物料名称</th>
              <th>规格型号</th>
              <th>单位</th>
              <th>含税单价</th>
              <th>数量</th>
              <th>金额</th>
            </tr>
            <tr v-for="(item,index) in data" :key="index">
              <td style="text-align: center">{{index + 1}}<i style="display: none">{{item.id}}</i></td>
                <td style="text-align: center">{{item.type}}</td>
                <td style="text-align: center">{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.stype}}</td>
                <td style="text-align: center">{{item.unit}}</td>
                <td style="text-align: right">{{item.tax_price}}</td>
                <td style="text-align: center">{{item.count}}</td>
                <td style="text-align: right">{{(item.tax_price * item.count).toFixed(2)}}</td>
            </tr>
            <tr>
              <td style="text-align: center">#</td>
              <td style="text-align: center">设备小计</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td style="text-align: right">{{ sum.sum1.toFixed(2) }}</td>
            </tr>
            <tr>
              <td style="text-align: center">#</td>
              <td style="text-align: center">主材小计</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td style="text-align: right">{{ sum.sum2.toFixed(2) }}</td>
            </tr>
            <tr>
              <td style="text-align: center">#</td>
              <td style="text-align: center">合计</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td style="text-align: right">{{ sum.sum.toFixed(2) }}</td>
            </tr>
          </table>
          <table style="width: 100%;height: 48px;">
            <tr>
              <td style="width: 25%; font-size: 14px;">经理：</td>
              <td style="width: 25%; font-size: 14px;">库管：</td>
              <td style="width: 25%; font-size: 14px;">提料：</td>
              <td style="width: 25%; font-size: 14px;">制表：</td>
            </tr>
          </table>
          <br/>
        </div>
      </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">确定</Button>
        <Button type="primary" @click="print" icon="ios-print-outline">打印</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {  } from '@/api/project';
import { getStore } from '@/libs/storage';
import printJS from 'print-js';
export default {
  name: 'view-project-material',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array
    },
    projectParams: Object
  },
  data() {
    return {
      visible: this.value,
      title: "查看项目物料清单",
      height: 540,
      submitLoading: false,
      company: '',
      organization: {},
    }
  },
  methods: {
    init() {
      const userInfo = JSON.parse(getStore('userInfo'));
      this.company = userInfo.compamy;
      this.organization = userInfo.organization;
    },
    handleCancel() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    print() {
      let options = {
        printable: 'page_material',
        type: 'html',
        scanStyles: false,
        style:`
.content_title {
  font-size: 12px;
}
.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
        `
      };
      printJS(options);
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  computed: {
    sum() {
      let sum = 0;
      let sum1 = 0;
      let sum2 = 0;
      this.data.forEach(item => {
        sum += item.count * item.tax_price;
        if (item.type == '设备') {
          sum1 += item.count * item.tax_price;
        } else {
          sum2 += item.count * item.tax_price;
        }
      });
      return {sum, sum1, sum2};
    }
  },
  mounted() {
    this.init();
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
</style>